<template>
	<view class="msg-list">
		<uni-nav-bar leftWidth="30px" background-color="#55acee" @clickLeft="goBack()" @clickRight="close()">
			<block slot="left">
				<uni-icons @click="goBack()" type="back" size="18" color="#fff" />
			</block>
			<view class="input-view" style="display: flex;align-items: center;">
				<input confirm-type="search" :value="search_text" @input="inputSearch" style="font-size: 12px;color: #fff;" placeholder-style="color:#d7d7d7;" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
					@confirm="confirm" />
			</view>
			<block slot="right">
				<uni-icons v-show="search_text.length>0" class="input-uni-icon" type="clear" size="18" color="#d7d7d7" />
			</block>
		</uni-nav-bar>
		<view class="record">
			<view class="re-item" v-for="(item, i) in search_data" :key="i">
				<view class="info">
					<image src="/static/u68.png" mode="aspectFill"></image>
					<view class="name-cont">
						<view class="name"><text>姓名{{item.from}}</text></view>
						<view class="cont-time">
							<view class="content" v-html="contentHandle(item.content)"></view>
							<text class="time">{{utils.handleTs(item.createTime, 'his')}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
	components: {
		uniNavBar
	},
	data() {
		return {
			options: {},
			search_text: '',
			msg_history: [],
			search_data: []
		}
	},
	onLoad(options) {
		console.log(40, options)
		this.options = options;
		// #ifdef H5
		this.getMsgHistory()
		// #endif
	},
	methods: {
		inputSearch(e){
			this.search_text = e.detail.value;
			this.search_data = [];
			if(this.search_text){
				
				// #ifdef APP-PLUS
				let that = this
				getApp().globalData.mysql.selectHistoryByKey('togroupmsg', this.search_text, 1, 20, function(res){
					console.log(50, res)
					that.search_data = res
				})
				// #endif
				// #ifdef H5
				for(let i=0; i<this.msg_history.length; i++){
					let item = this.msg_history[i]
					if(item.content.indexOf(this.search_text)!=-1){
						// item.cont = item.content.split(this.search_text).join(`<text style="color: #02A7F0">${this.search_text}</text>`)

						this.search_data.push(item)
					}
					
				}
				// #endif
			}
		},
		// #ifdef H5
		getMsgHistory(){
			getApp().globalData.mysql.getDataByPage('togroupmsg', 'groupId', this.options.id, 1, 20, (res)=>{
				console.log(78, res,  this.options.id)
				this.msg_history = res;
			})
		},
		// #endif
		contentHandle(cont){
			let str = cont.split(this.search_text).join(`<text style="color: #02A7F0">${this.search_text}</text>`)
			return str
		},
		confirm() {
			uni.showToast({
				title: '搜索'
			})
		},
		goBack(){
			console.log(96)
			uni.navigateBack({
				delta: 1
			})
		},
		close(){
			this.search_text = '';
			this.search_data = []
		},
		
	}
}
</script>
<style lang="less" scoped>

	.record{
		padding: 32rpx;
	}
	.re-item{
		padding: 16rpx 0;
		font-size: 26rpx;
		color: #7f7f7f;
		.info{
			display: flex;
			align-items: center;
		}
		image{
			width: 82rpx;
			height: 82rpx;
			border-radius: 41rpx;
			margin-right: 24rpx;
		}
		.name{
			color: #333;
		}
		.time{
			margin-left: 20rpx;
		}
	}
	.name-cont{
		width: calc(100% - 106rpx);
	}
	.name{
		margin-bottom: 10rpx;
	}
	.cont-time{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		
	}
	.content{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>